<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Examples Method Demo</title>
</head>
<body>
    <h1>Examples Method Demo</h1>
    <hr>
    <div id="app"></div>
    <p><button onclick="destroy()">卸载</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <p><button onclick="tick()">修改</button></p>
    
    <script type="text/javascript">
      var jspang = Vue.extend({
          template:`<p>{{message}}</p>`,
          data:function(){
              return {
                  message:'Hello ,I am JSPang'
              }
          },
          destroyed:function(){
              console.log('10-destroyed 销毁之后');
          },
          mounted:function(){
              console.log("4-mounted 被创建");
          },
          updated:function(){
              console.log("6-updated 被更新后");
          }
      })
      var vm = new jspang().$mount("#app")

      function destroy(){
          vm.$destroy();
      }

      function reload(){
          vm.$forceUpdate();
      }

function tick(){
    vm.message="update message info ";
    vm.$nextTick(function(){
        console.log('message更新完后我被调用了');
    })
}
    </script>
</body>
</html>